<template>
	<view class="container">
		<wyb-drop-down-my ref="dropDown" :options="options" @select="onItemSelect">
		</wyb-drop-down-my>
		<view class="tab_top">
			<view class="search_box" @click="openrili">
				<view :class="['start_box', searchform.endTime ? 'hasvalue' : '']">
					{{searchform.beginTime ? searchform.beginTime : "开始时间"}}
				</view>
				<view class="time_line"></view>
				<view :class="['end_box', searchform.endTime ? 'hasvalue' : '']">
					{{searchform.endTime ? searchform.endTime : "结束时间"}}
				</view>
			</view>
			<view class="right" @click="chongzhi">
				重置
			</view>
		</view>
		<view class="content_box" v-if="tableData.length > 0">
			<view class="item" v-for="(item,index) in tableData" @click="godetail(item)">
				<view class="top1">
					<text v-if="item.sentiment == 'POSITIVE'" class="POSITIVE">正面</text>
					<text v-else-if="item.sentiment == 'NEUTRAL'" class="NEUTRAL">中立</text>
					<text v-else class="NEGATIVE">负面</text>
					<text class="time">
						{{item.updateDate.substring(0,7)}}-{{item.updateDate.substring(8,10)}}
					</text>
				</view>
				<view class="tem_top">
					<!-- <view class="tem_top_one_box">
						<view class="tem_top_one_box_one">
							{{item.updateDate.substring(8,10)}}
						</view>
						<view class="tem_top_one_box_line">
						</view>
						<view class="tem_top_one_box_two">
							{{item.updateDate.substring(0,7)}}
						</view>
					</view> -->
					<view class="tem_top_two_box">
						<view class="nr" v-html="item.title">
						</view>
					</view>
				</view>
				<view class="item_bottom">
					<view class="nr" v-html="item.summary">
					</view>
				</view>
			</view>
		</view>
		<view class="content_box" v-else>
			暂无数据
		</view>
		<view class="">
			<uni-calendar ref="calendar" class="uni-calendar--hook" :insert="false" :clear-date="true" :date="info.date"
				:lunar="info.lunar" :beginTime="info.beginTime" :endTime="info.endTime" :range="info.range"
				@confirm="confirm" @close="close" />
		</view>

	</view>
</template>

<script>
	import wybDropDownMy from './wyb-drop-down/wyb-drop-downMy.vue'
	import {
		getPublicOpinionDetailStatisticsList,
		getPublicOpinionStatisticsList
	} from "@/net/shishiredian";
	export default {
		data() {
			return {
				moreStatus: 'more', // noMore more
				options: [{
					header: '',
					contents: [],
				}],
				tableData: [],
				searchform: {
					pageNum: 1,
					pageSize: 10,
					endTime: "",
					beginTime: "",
					sentiment:""
				},
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				}
			}
		},
		components: {
			wybDropDownMy
		},
		onReady() {
			this.getPublicOpinionStatisticsList()
		},
		// 下拉刷新，获取最新的数据
		onPullDownRefresh() {
			// console.log("上拉刷新")
			let that = this;
			that.tableData = []
			that.searchform.pageNum = 1
			this.selectPage()
			uni.stopPullDownRefresh()
		},
		// 上拉刷新，获取历史数据
		onReachBottom() {
			// console.log("触底加载")
			// this.searchform.pageNum++
			// this.selectPage()
		},
		methods: {
			openrili() {
				// console.log(111)
				this.$refs.calendar.open()
			},
			confirm(value) {
				// console.log('confirm 返回:', value)
				this.searchform.beginTime = value.range.data[0]
				this.searchform.endTime = value.range.data[Number(value.range.data.length) - 1]
				this.tableData = []
				this.searchform.pageNum = 1
				this.selectPage()
			},
			chongzhi() {
				this.tableData = []
				this.searchform.pageNum = 1
				this.searchform.beginTime = ""
				this.searchform.endTime = ""
				this.selectPage()
			},
			close() {
				// console.log('弹窗关闭');
			},
			onItemSelect(e) {
				// console.log(e, 1111)
				this.tableData = []
				this.searchform.pageNum = 1
				this.searchform.beginTime = ""
				this.searchform.endTime = ""
				this.$refs.dropDown.$data.dropOver = false

				this.$refs.dropDown.$data.dropDown = false
				this.searchform.taskId = e.content.taskId
				this.selectPage()
			},
			getPublicOpinionStatisticsList() {
				getPublicOpinionStatisticsList().then(res => {
					let leibieArr = JSON.parse(res.data).data
					let leibieArrNow = []
					leibieArr.map(item => {
						if (item.keyword) {
							leibieArrNow.push(item)
						}
					})
					// console.log("舆情类别", leibieArr, leibieArrNow)
					this.options[0].header = leibieArrNow[0].keyword
					leibieArrNow.forEach((item, index) => {
						this.options[0].contents.push({
							name: item.keyword,
							navIndex: 0,
							taskId: item.taskId
						})
					})
					// console.log("this.options", this.options)
					this.searchform.taskId = this.options[0].contents[0].taskId
					this.selectPage()
				})
			},
			selectPage() {
				// console.log(this.searchform, "this.searchform")
				this.moreStatus = 'loading'
				getPublicOpinionDetailStatisticsList(this.searchform).then(res => {
					// // console.log(res)
					let origindata = JSON.parse(res.data)
					console.log(1111, origindata)
					this.tableData.push(...origindata.data)
				})
			},
			godetail(e) {
				uni.setStorage({
					key: "shishiredian_data",
					data: {
						...e
					}
				})
				uni.navigateTo({
					url: "/pages/shishiredian/detail"
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	::v-deep .uni-calendar-item__weeks-box-item {
		height: auto;
	}



	.container {
		margin-bottom: 28rpx;
		padding-top: 100rpx;
		// background-color: red;
		position: relative;
		// z-index: 100;

		.tab_top {
			position: fixed;
			// z-index: 100;
			width: 100%;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.search_box {
				width: 542rpx;
				height: 80rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #B0C5D9;
				margin: 20rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.start_box {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					width: 200rpx;
					// border: 1px solid red;
					text-align: center;


					&.hasvalue {
						color: #333333;
					}
				}

				.time_line {
					width: 18rpx;
					height: 5rpx;
					background-color: #B0C5D9;
				}

				.end_box {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					text-align: center;
					width: 200rpx;
					// border: 1px solid red;

					&.hasvalue {
						color: #333333;
					}
				}


			}

			.right {
				width: 140rpx;
				height: 80rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #0b847b;
				line-height: 80rpx;
				text-align: center;
				color: #0b847b;
				font-size: 30rpx;
			}
		}


		.content_box {
			// height: 600px;
			padding-top: 140rpx;
			padding-left: 24rpx;

			.item {
				display: inline-block;
				width: 702rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 28rpx;
				margin-bottom: 20rpx;
				// margin-top: 20rpx;

				.tem_top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.tem_top_one_box {
						width: 100rpx;
						height: 100rpx;
						background: #3B95FF;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-around;

						.tem_top_one_box_one {
							font-size: 36rpx;
							font-weight: bold;
							color: #FFFFFF;
						}

						.tem_top_one_box_line {
							width: 80rpx;
							height: 1rpx;
							background: #FFFFFF;
						}

						.tem_top_one_box_two {
							font-size: 20rpx;
							font-weight: 400;
							color: #FFFFFF;
						}

					}

					.tem_top_two_box {
						// width: 526rpx;
						font-size: 30rpx;
						font-weight: bold;
						color: #0E1634;

						.nr {
							font-size: 30rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							line-height: initial;

							:deep(em) {
								color: red;
							}
						}


					}
				}

				.item_bottom {
					margin-top: 20rpx;

					// padding: 28rpx 20rpx;
					.nr {
						font-size: 30rpx;
						font-weight: 400;
						color: #6F727C;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						/* 设置行数 */
						-webkit-box-orient: vertical;
						line-height: initial;

						:deep(em) {
							color: red;
						}
					}
				}
			}
		}
	}

	.top1 {
		margin-bottom: 20rpx;
		.POSITIVE,
		.NEUTRAL,
		.NEGATIVE {
			width: 100rpx;
			height: 52rpx;
			background: #3B95FF;
			border-radius: 8rpx;
			padding: 6rpx 20rpx;

			line-height: 52rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			margin-right: 20rpx;
		}
		.POSITIVE{
			background: #67C23A;
		}
		.NEGATIVE{
			background: #E6A23C;
		}
	.time {
		width: 200rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		background: #EEF6FF;
		border-radius: 8rpx;
		opacity: 1;
		border: 1rpx solid #3B95FF;
		font-size: 30rpx;
		font-weight: 500;
		color: #3B95FF;
		padding: 6rpx 20rpx;
		}
}

	// ::v-deep .wyb-drop-down-header{
	// 	background-color: rgba(11, 132, 123, 0.3) !important;
	// }
	::v-deep .iconfont,
	::v-deep .uniui-list{
		color: #0b847b !important;
	}
</style>
